<template>
  <div class="wrapper">
    <div id="map" class="mapC"></div>
    <div id="progress"></div>
  </div>
</template>

<script>
import 'ol/ol.css'
import Map from 'ol/Map'
import TileLayer from 'ol/layer/Tile'
import View from 'ol/View'
import XYZ from 'ol/source/XYZ'
export default {
  name: 'index',
  data () {
    return {}
  },
  mounted () {
    this.initMap()
  },
  methods: {
    initMap () {
      function Progress (el) {
        this.el = el
        this.loading = 0
        this.loaded = 0
      }

      /**
       * Increment the count of loading tiles.
       */
      Progress.prototype.addLoading = function () {
        if (this.loading === 0) {
          this.show()
        }
        ++this.loading
        this.update()
      }

      /**
       * Increment the count of loaded tiles.
       */
      Progress.prototype.addLoaded = function () {
        const this_ = this
        setTimeout(function () {
          ++this_.loaded
          this_.update()
        }, 100)
      }

      /**
       * Update the progress bar.
       */
      Progress.prototype.update = function () {
        const width = ((this.loaded / this.loading) * 100).toFixed(1) + '%'
        this.el.style.width = width
        if (this.loading === this.loaded) {
          this.loading = 0
          this.loaded = 0
          const this_ = this
          setTimeout(function () {
            this_.hide()
          }, 500)
        }
      }

      /**
       * Show the progress bar.
       */
      Progress.prototype.show = function () {
        this.el.style.visibility = 'visible'
      }

      /**
       * Hide the progress bar.
       */
      Progress.prototype.hide = function () {
        if (this.loading === this.loaded) {
          this.el.style.visibility = 'hidden'
          this.el.style.width = 0
        }
      }

      const progress = new Progress(document.getElementById('progress'))

      const key = 'get_your_own_D6rA4zTHduk6KOKTXzGB'
      const attributions =
        '<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> ' +
        '<a href="https://www.openstreetmap.org/copyright" target="_blank">&copy; OpenStreetMap contributors</a>'

      const source = new XYZ({
        attributions: attributions,
        url: 'https://api.maptiler.com/maps/streets/{z}/{x}/{y}.png?key=' + key,
        tileSize: 512
      })

      source.on('tileloadstart', function () {
        progress.addLoading()
      })

      source.on('tileloadend', function () {
        progress.addLoaded()
      })
      source.on('tileloaderror', function () {
        progress.addLoaded()
      })
      // eslint-disable-next-line
      const map = new Map({
        layers: [new TileLayer({source: source})],
        target: 'map',
        view: new View({
          center: [0, 0],
          zoom: 2
        })
      })
    }
  }
}
</script>

<style scoped>
  .mapC {
    background: #85ccf9;
  }
  .wrapper {
    position: relative;
  }
  #progress {
    position: absolute;
    bottom: 2px;
    left: 0;
    height: 0;
    box-shadow: 0px 0px 1px 2px rgb(255,204,0);
    width: 0;
    z-index: 10;
    transition: width 250ms;
  }
</style>
